<!--代理——摄像头管理——余额记录-->
<template>
  <div class="ele-body">
    <el-card shadow="false">
      <div class="flex-between keyword-top">
        <div class="keyword-title">余额记录</div>
      </div>
      <div class="flex-align-center m-top10">
        <div v-for="(i,j) in list" :key="j" class="flex-column summary" :class="j==1?'border':''">
          <span>{{i.text}}</span>
          <div>{{i.num}}</div>
        </div>
      </div>
    </el-card>

    <el-card shadow="false">
      <el-form
        :hide-required-asterisk="true"
        ref="form"
        :model="form"
        label-width="80px"
        @keyup.enter.native="submit"
        @submit.native.prevent
      >
        <el-row :gutter="15" class="m-top15">
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="商家名称:" prop="merchantCode" class="width90">
              <el-input
                v-model="form.merchantCode"
                placeholder="请输入商家名称"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="代理名称:" prop="oemCode" class="width90">
              <el-input
                v-model="form.oemCode"
                placeholder="请输入代理名称"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="套餐名称:" prop="monitoringRecordName" class="width90">
              <el-input
                v-model="form.monitoringRecordName"
                placeholder="请输入套餐名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="套餐类型:" prop="types" class="width90">
              <el-select
                v-model="form.types"
                placeholder="请选择套餐类型"
                class="ele-block"
                clearable
              >
                <el-option label="开通" :value="1" />
                <el-option label="续费" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col style="height: 60px" :xs="12" :sm="12" :lg="8" :xl="8">
            <el-form-item label="创建时间:" prop="datetime" class="width90">
              <el-date-picker
                v-model="datetime"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="ele-fluid"
                @change="select"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-bottom: 10px">
          <el-col  :xs="12" :sm="12" :lg="12" :xl="12">
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              class="colorBlue"
              @click="see()"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="false">
      <!-- 数据表格 -->
      <ele-pro-table
        :toolbar="false"
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :need-page="false"
      >
        <template v-slot:types="{ row }">
          <div>{{row.types==1 ? '开通' : '续费'}}</div>
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import {queryAgentMoney, queryBalanceRecord} from '@/api/lncomingManagement/carmeraAgent'
  export default {
    name: "index",
    data(){
      return{
        datetime:[],
        form:{},
        list:[
          {
            text:"今日使用余额",
            num:0
          },
          {
            text:"本月使用余额",
            num:0
          },
          {
            text:"总使用余额",
            num:0
          },
        ],
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            label: '序号',
            width: 60,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'merchantCode',
            label: '商家名称',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'oemCode',
            label: '代理名称',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'monitoringRecordName',
            label: '套餐名称',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'types',
            label: '套餐类型',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 110,
            slot:'types'
          },
          {
            prop: 'ofMoney',
            label: '使用余额',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'createTime',
            label: '创建时间',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 110
          },

        ],
      }
    },
    activated(){
      this.init()
    },
    methods:{
      init(){
        // 今日/每日/总使用余额汇总
        queryBalanceRecord({
          oemId:this.$store.state.user.info.oemId  //代理ID
        })
          .then((data) => {
            console.log("data",data)
            this.list[0].num=data.todaysAmount ? data.todaysAmount : 0 //今日使用余额
            this.list[1].num=data.monthlyAmount ? data.monthlyAmount : 0 //本月使用余额
            this.list[2].num=data.totalAmount ? data.totalAmount : 0 //总使用余额
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },
      // 日期选择
      select(e){
        console.log("日期选择e============",e,'form.datetime',this.form.datetime)
        if(this.datetime){
          console.log("日期选择e============",e,'form.datetime',this.datetime)
          Object.assign( this.form, {
            startTime:  this.datetime[0],
            endTime:  this.datetime[1]
          })
        }
      },
      see(){
        if(!this.form.merchantCode){
          delete this.form.merchantCode
        }
        if(!this.form.oemCode){
          delete this.form.oemCode
        }
        if(!this.form.monitoringRecordName){
          delete this.form.monitoringRecordName
        }
        if(!this.form.types){
          delete this.form.types
        }
        if(!this.datetime){
          delete this.form.startTime
          delete this.form.endTime
        }
        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },
      resetting(){
        this.datetime=[]
        this.form={}
        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        console.log(" page, limit, where, order", page, limit, where, order)
        return queryAgentMoney({ ...where, ...order, page, limit,
          ...this.form,
          oemId:this.$store.state.user.info.oemId  //代理ID
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      }
    }
  }
</script>


<style scoped lang="less">
  .border{
    border-right: 1px solid #EBEBEB;
    border-left: 1px solid #EBEBEB;
  }
  .summary{
    width: calc(100%/3);
    span{
      color: #757575;
    }
    div{
      margin: 15px 0px;
      color: #1E6CEB;
      font-size: 24px;
    }
  }
  .keyword-top{
    padding:4px 4px 20px;
    .keyword-title{
      font-size: 20px;
      line-height: 24px;
      margin-right: 20px;
      color: #000000;
    }
    .border{
      border-radius: 5px;
      overflow: hidden;
      .no-select-type,.select-type{
        width: 68px;
        height: 29px;
      }
      .select-type{
        background: #1E6CEB;
        color: #FFFFFF;
      }
      .no-select-type{
        border: 1px solid #F5F5F5;
        color: #ABAFB5;
      }
    }
  }
</style>
